{% extends "./commons/layout.html" %} {% block css %}
<link rel="stylesheet" type="text/css" href="/css/process.css">
<link rel="stylesheet" type="text/css" href="/vendor/datePicker/dist/css/main.css"> {% endblock %} {% block content %}
<div class="container">
    <div class="content">
        <div class="tags">
            <div class="tag tag-active">
                <span>1</span>
                <div>
                    <p class="tag-title">发布需求 工厂响应</p>
                    <p class="tag-desc">15分钟获得工厂合作意愿</p>
                </div>
                <div class="border"></div>
            </div>
            <div class="tag">
                <span>2</span>
                <div>
                    <p class="tag-title">选定工厂 明确订单需求</p>
                    <p class="tag-desc">24小时获得工厂报价</p>
                </div>
                <div class="border"></div>
            </div>
            <div class="tag">
                <span>3</span>
                <div class="">
                    <p class="tag-title">完成</p>
                    <p class="tag-desc">选择合作工厂，下单</p>
                </div>
                <div class="border"></div>
            </div>
        </div>
        <p class="title">1000+家精选工厂为您服务，满足您的任意定制需求</p>
        <div class="content-main">
            <div class="content-left">
                <div class="header-title">
                    发布需求仅需4步：
                </div>
                <div class="sec">
                    <p class="sec-title">
                        1.选择产品类目
                    </p>
                    <div class="sec-content">
                        <div class="cats-content">
                            <div class="cats">
                                <!-- <div class="cat-item cat-active">
                                    <img class="cat-logo" src="/img/nvzhuang_logo.jpg">
                                    <p class="cat-title">女装</p>
                                    <div class="cat-border"></div>
                                </div>
                                <div class="cat-item">
                                    <img class="cat-logo" src="/img/nanzhuang_logo.jpg">
                                    <p class="cat-title">男装</p>
                                    <div class="cat-border"></div>
                                </div>
                                <div class="cat-item">
                                    <img class="cat-logo" src="/img/tongzhuang_logo.jpg">
                                    <p class="cat-title">童装</p>
                                    <div class="cat-border"></div>
                                </div>
                                <div class="cat-item">
                                    <img class="cat-logo" src="/img/neiyi_logo.jpg">
                                    <p class="cat-title">内衣</p>
                                    <div class="cat-border"></div>
                                </div>
                                <div class="cat-item">
                                    <img class="cat-logo" src="/img/yundong_logo.jpg">
                                    <p class="cat-title">运动户外</p>
                                    <div class="cat-border"></div>
                                </div>
                                <div class="cat-item">
                                    <img class="cat-logo" src="/img/qita_logo.jpg">
                                    <p class="cat-title">其他</p>
                                    <div class="cat-border"></div>
                                </div> -->
                            </div>
                            <div class="sub-cats">
                                <div class="sub-cats-title">
                                    热门分类
                                </div>
                                <div class="sub-cats-content">
                                    <!-- <div class="sub-cats-item">连衣裙</div>
                                    <div class="sub-cats-item">连衣裙</div>
                                    <div class="sub-cats-item">连衣裙</div>
                                    <div class="sub-cats-item">连衣裙</div>
                                    <div class="sub-cats-item">连衣裙</div>
                                    <div class="sub-cats-item">连衣裙</div> -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="sec">
                    <p class="sec-title">
                        2.选择材质
                    </p>
                    <div class="sec-content">
                        <div class="caizhis">
                            <!-- <div class="caizhi-item caizhi-item-active">针织</div>
                            <div class="caizhi-item">梭织</div>
                            <div class="caizhi-item">毛织</div>
                            <div class="caizhi-item">牛仔</div>
                            <div class="caizhi-item">皮革</div>
                            <div class="caizhi-item">皮草</div>
                            <div class="caizhi-item">不清楚</div> -->
                        </div>
                    </div>
                </div>
                <div class="sec">
                    <p class="sec-title">
                        3.选择款式
                    </p>
                    <div class="sec-content">
                        <div class="kuanshi-container">
                            <div class="kuanshis">
                                <!-- <div class="kuanshi-item">
                                    <img class="kuanshi-logo" src="/img/kuanshi_logo.jpg">
                                    <div class="kuanshi-selected"></div>
                                    <p class="kuanshi-no">编号：0192928</p>
                                    <p class="kuanshi-tedian">特点：肩宽，肩宽</p>
                                </div>
                                <div class="kuanshi-item">
                                    <img class="kuanshi-logo" src="/img/kuanshi_logo1.jpg">
                                    <div class="kuanshi-selected"></div>
                                    <p class="kuanshi-no">编号：0192928</p>
                                    <p class="kuanshi-tedian">特点：肩宽，肩宽</p>
                                </div>
                                <div class="kuanshi-item">
                                    <img class="kuanshi-logo" src="/img/kuanshi_logo2.jpg">
                                    <div class="kuanshi-selected"></div>
                                    <p class="kuanshi-no">编号：0192928</p>
                                    <p class="kuanshi-tedian">特点：肩宽，肩宽</p>
                                </div>
                                <div class="kuanshi-item">
                                    <img class="kuanshi-logo" src="/img/kuanshi_logo3.jpg">
                                    <div class="kuanshi-selected"></div>
                                    <p class="kuanshi-no">编号：0192928</p>
                                    <p class="kuanshi-tedian">特点：肩宽，肩宽</p>
                                </div>
                                <div class="kuanshi-item">
                                    <img class="kuanshi-logo" src="http://img3.imgtn.bdimg.com/it/u=1710356827,4037454180&fm=27&gp=0.jpg">
                                    <div class="kuanshi-selected"></div>
                                    <p class="kuanshi-no">编号：0192928</p>
                                    <p class="kuanshi-tedian">特点：肩宽，肩宽</p>
                                </div>
                                 <div class="kuanshi-item">
                                    <img class="kuanshi-logo" src="http://img2.imgtn.bdimg.com/it/u=2180117416,1047913966&fm=27&gp=0.jpg">
                                    <div class="kuanshi-selected"></div>
                                    <p class="kuanshi-no">编号：0192928</p>
                                    <p class="kuanshi-tedian">特点：肩宽，肩宽</p>
                                </div> -->
                            </div>
                            <div class="btn btn-prev">&lt;</div>
                            <div class="btn btn-next">&gt;</div>
                        </div>
                        <p class="no">暂无相关款式</p>
                        <div class="upload">
                            <p>没有我要的款式，我要自己上传</p>
                            <div class="upload-container">
                                <div class="empty-container">
                                    <input class="file-input" type="file" id="file" name="" />
                                    <img class="beibao-logo" src="/img/beibao_logo.png">
                                    <img class="upload-icon" src="/img/upload_icon.png">
                                    <p class="upload-title">上传</p>
                                </div>
                                <div class="img-container">
                                    <img class="remove-icon" src="/img/remove_icon.png">
                                    <img id="upload-img" src="" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="sec">
                    <p class="sec-title">
                        4.加工数量
                    </p>
                    <div class="sec-content">
                        <div class="quantity-form">
                            <input id="count" class="quantity-input" type="" placeholder="请填写具体数量" name="count"><span>件</span>
                            <span class="error-message">请输入数字！</span>
                        </div>
                    </div>
                </div>
                <div class="header-title">
                    <span>选择工厂偏好</span>
                    <span class="header-desc">更智能、更精准为你减小工厂匹配（选填）</span>
                    <span id="additional-btn" class="header-right">展开</span>
                </div>
                <div class="additional">
                    <div class="sec">
                        <p class="sec-title">
                            加工用途
                        </p>
                        <div class="sec-content">
                            <div class="yongtus">
                                <div data-val="STD" class="useType yongtu-item yongtu-active">
                                    <img class="shitidian-icon" src="/img/shitidian@2x.png">
                                    <p class="yongtu-title">为实体店加工</p>
                                    <p class="yongtu-desc">交期保障 品质保障</p>
                                </div>
                                <div data-val="TM" class="useType yongtu-item">
                                    <img class="tianmaodian-icon" src="/img/tianmaodian@2x.png">
                                    <p class="yongtu-title">为天猫点加工</p>
                                    <p class="yongtu-desc">快速加工 不断货</p>
                                </div>
                                <div data-val="TB" class="useType yongtu-item">
                                    <img class="tianmaodian-icon" src="/img/wanghongdian@2x.png">
                                    <p class="yongtu-title">为淘宝店加工</p>
                                    <p class="yongtu-desc">快速翻单</p>
                                </div>
                                <div data-val="WS" class="useType yongtu-item">
                                    <img class="taobaodian-icon" src="/img/taobaodian@2x.png">
                                    <p class="yongtu-title">为微商店加工</p>
                                    <p class="yongtu-desc">小单定制50件起</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="sec">
                        <p class="sec-title">
                            工厂区域
                        </p>
                        <div class="sec-content">
                            <div class="quyus">
                                <div data-val="ALL" class="factoryArea quyu-item quyu-active">全国</div>
                                <div data-val="JZH" class="factoryArea quyu-item">江浙沪</div>
                                <div data-val="GD" class="factoryArea quyu-item">广东</div>
                            </div>
                        </div>
                    </div>
                    <div class="sec-group" style="margin-bottom: 60px;">
                        <div class="sec">
                            <p class="sec-title">
                                加工类型
                            </p>
                            <div class="sec-content">
                                <div class="jiagongs">
                                    <div data-val="BGBL" class="processType jiagong-item jiagong-item-active">
                                        包工包料
                                    </div>
                                    <div data-val="QJG" class="processType jiagong-item">
                                        清加工
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="sec">
                            <p class="sec-title">
                                是否开发票
                            </p>
                            <div class="sec-content">
                                <div class="fapiaos">
                                    <div data-val="true" class="needInvoice fapiao-item fapiao-item-active">不要发票</div>
                                    <div data-val="false" class="needInvoice fapiao-item">需要发票</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="sec">
                        <p class="sec-title">
                            期望单价范围
                        </p>
                        <div class="sec-content">
                            <div class="prices">
                                <input id="expectedMinPrice" class=price-input type="" name="" placeholder="最低价">
                                <span>—</span>
                                <input id="expectedMaxPrice" class=price-input type="" name="" placeholder="最高价">
                                <span class="error-message"></span>
                            </div>
                        </div>
                    </div>
                    <div class="sec">
                        <p class="sec-title">
                            期望交货期时间
                        </p>
                        <div class="sec-content">
                            <div class="jiaohuoqi">
                                <input id="expectedDeliveryTime" class="jiaohuoqi-input" />
                                <span class="error-message"></span>
                                <div class="ui-datepicker-wrapper"></div>
                            </div>
                        </div>
                    </div>
                    <div class="sec-group">
                        <div class="sec">
                            <p class="sec-title">
                                称呼
                            </p>
                            <div class="sec-content">
                                <div class="jiaohuoqi">
                                    <input id="contactName" class="jiaohuoqi-input" />
                                    <span class="error-message"></span>
                                </div>
                            </div>
                        </div>
                        <div class="sec">
                            <p class="sec-title">
                                联系方式
                            </p>
                            <div class="sec-content">
                                <div class="jiaohuoqi">
                                    <input id="contactPhone" class="jiaohuoqi-input" />
                                    <span class="error-message"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="header-title">
                        <span>订单备注</span>
                        <span class="header-desc">填写您的其他要求如尺码、颜色、工艺等，帮助工厂/服务专家了解订单（选填）</span>
                    </div>
                    <div class="sec">
                        <div class="sec-content">
                            <textarea id="remarks" class="remark"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content-right">
                    <div class="xuqiu-header">
                        <img class="xuqiu-logo" src="/img/xuqiu_icon.png">
                        <p>您的加工需求</p>
                    </div>
                    <div class="xuqiu-content">
                        <div class="xuqiu-section">
                            <p class="xuqiu-left">产品类目</p>
                            <p id="process-cat" class="xuqiu-right">女装/连衣裙</p>
                        </div>
                        <div class="xuqiu-section">
                            <p class="xuqiu-left">工厂区域</p>
                            <p id="process-area" class="xuqiu-right">全国</p>
                        </div>
                        <div class="xuqiu-section">
                            <p class="xuqiu-left">款式</p>
                            <p class="xuqiu-right">自定义</p>
                        </div>
                        <div class="xuqiu-section">
                            <p class="xuqiu-left">加工数量</p>
                            <p id="process-quantity" class="xuqiu-right">0</p>
                        </div>
                        <div class="xuqiu-section">
                            <p class="xuqiu-left">加工用途</p>
                            <p id="process-use" class="xuqiu-right">实体店</p>
                        </div>
                        <div class="xuqiu-section">
                            <p class="xuqiu-left">加工类型</p>
                            <p id="process-type" class="xuqiu-right">包工包料</p>
                        </div>
                        <div class="xuqiu-section">
                            <p class="xuqiu-left">是否开发票</p>
                            <p id="process-fapiao" class="xuqiu-right">不要发票</p>
                        </div>
                        <div class="xuqiu-section">
                            <p class="xuqiu-left">期望单价范围</p>
                            <p id="process-fanwei" class="xuqiu-right">暂无</p>
                        </div>
                        <div class="xuqiu-section">
                            <p class="xuqiu-left">期望交货期</p>
                            <p id="process-jiaohuoqi" class="xuqiu-right">暂无</p>
                        </div>
                        <div class="xuqiu-section">
                            <p class="xuqiu-left">称呼</p>
                            <p id="process-username" class="xuqiu-right">暂无</p>
                        </div>
                        <div class="xuqiu-section">
                            <p class="xuqiu-left">联系方式</p>
                            <p id="process-phone" class="xuqiu-right">暂无</p>
                        </div>
                    </div>
                </div>
        </div>
        <div class="btn-group">
            <button class="shangqiao-btn btn btn-left">联系客服</button>
            <button id="submit" class="btn btn-right">立即发布</button>
        </div>
    </div>
</div>
<script type="text/javascript" src="/vendor/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="/vendor/datePicker/dist/js/datePicker.min.js"></script>
<script type="text/javascript" src="/js/process.js"></script>
{% include "commons/shangqiao.html" %}
{% endblock %}